import { Form, Input, Button, Space,Table } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import styles from './style.less'
import { useState } from 'react';
import { useEffect } from 'react';
import { RichTextEdit } from '@/components/RichText';

const RiskItemEdit = (props) => {

    const {
        onSave,
        onCancel,
        defaultValue
    } = props
    const onFinish = values => {
        if (onSave) {
            onSave(values.riskList)
        }
    };
    return (
        <Form onFinish={onFinish} autoComplete="off" >
            <Form.List name="riskList" initialValue={defaultValue}>
                {(fields, { add, remove }) => (
                    <>
                        {fields.map(({ key, name, fieldKey, ...restField }) => (
                            <Space key={key} align="center" style={{padding:"4px"}}>
                                <Form.Item
                                    {...restField}
                                    name={[name, 'name']}
                                    style={{marginBottom:0}}
                                    fieldKey={[fieldKey, 'name']}
                                    rules={[{ required: true, message: '请输入名称' }]}
                                >
                                    <Input placeholder="名称" maxLength={15} />
                                </Form.Item>
                                <Form.Item
                                    {...restField}
                                    name={[name, 'value']}
                                    style={{marginBottom:0}}
                                    fieldKey={[fieldKey, 'value']}
                                    rules={[{ required: true, message: '请输入内容' }]}
                                >
                                    <Input placeholder="内容" maxLength={40} style={{ width: "440px" }} />
                                </Form.Item>
                                <MinusCircleOutlined onClick={() => remove(name)} />
                            </Space>
                        ))}
                        <Form.Item style={{ padding: "4px" }}>
                            <Button type="dashed" onClick={() => {
                                if (fields && fields.length > 10) {
                                    message.error("最多只能添加10组")
                                    return 
                                }
                                add()
                            }} block style={{ width: "240px" }} icon={<PlusOutlined />}>新增 </Button>
                        </Form.Item>
                    </>
                )}
            </Form.List>
            <Form.Item style={{ padding: "4px" }}>
                <Space style={{ display: 'flex', marginBottom: 8 }} align="center">
                    <Button type="primary" htmlType="submit">确认</Button>
                    <Button onClick={onCancel}>取消</Button>
                </Space>

            </Form.Item>
        </Form>
    );
};

const RiskItem = (props) => {
    const {
        risks = [],
        permission = {
            edit: true
        }
    } = props

    const [list,setList] = useState();

    useEffect(() => {
        setList(risks)
    },[risks])

    const columns = [
        {
            dataIndex: 'name',
            key: 'name',
        },
        {
            dataIndex: 'value',
            key: 'value',
        }
    ]

    return <Table className={styles.riskItems} 
        showHeader={false}
        pagination={false}
        rowKey={(record) => record.name + record.value}
        columns={columns}
        dataSource={list}
        locale={{
            emptyText:"暂无数据"
        }}
    />
}

RiskItem.Edit = RiskItemEdit;

export default RiskItem;